<template>
    <div style="min-width: 809px">
        <div v-if="$route.path == '/cashier'">
            <div class="vs-search-box">
                <div class="searchInfo">
                    <el-form ref="form" :inline="true" :model="paging" label-width="120px">
                        <el-form-item label="">
                            <el-input class="vs-w-500" @keyup.enter.native="select_vip_input(1)" placeholder="请输入姓名、手机号或会员卡号（尽可能详细）" v-model="keys">
                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                <div class="inquire" @click="select_vip_input(1)" slot="append">
                                    <i v-show="isBtn" class="el-icon-loading"></i>
                                    查找会员
                                </div>
                            </el-input>
                        </el-form-item>
                        <el-form-item class="fl-right" label="">
                            <div class="btnList">
                                <el-button type="primary" @click="utils.goUrl('/cashieraddMember?returnUser=1')" style="padding: 10px 40px">开卡</el-button>
                                <el-button @click="goUserSrc('setUserRecharge')" type="success" style="padding: 10px 40px; margin-left: 30px">充值</el-button>
                                <!-- <el-button @click="goUserSrc('appointments')" style="padding: 10px 40px; margin-left: 30px">预约</el-button> -->
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="userInfo">
                    <div class="info" v-if="true">
                        <div class="left_user_info" @click="lookUser">
                            <div>
                                <el-image style="width: 100%; height: 100%" fit="cover" :src="userInfo.avatar">
                                    <div slot="error" class="image-slot">
                                        <img style="width: 100%; height: 100%" src="https://api.yiweika.net/uploads/2021/12/06/srchttp___pic2.zhimg.com_50_v2-6b648675305dc2c9130d6db9bfe61f24_hd.jpgreferhttp___pic2.zhimg.jpg" alt="" />
                                    </div>
                                </el-image>
                            </div>
                            <span>点击会员头像查看详情</span>
                        </div>
                        <div class="right_user_info">
                            <el-form ref="form" :model="userInfo" label-width="100px" size="small" class="userForm">
                                <el-form-item label="会员卡号">
                                    <el-input readonly v-model="userInfo.vip_no"></el-input>
                                </el-form-item>
                                <el-form-item label="姓名">
                                    <el-input readonly v-model="userInfo.realname"></el-input>
                                </el-form-item>
                                <el-form-item label="手机号">
                                    <el-input readonly v-model="userInfo.phone"></el-input>
                                </el-form-item>
                                <el-form-item label="所属门店">
                                    <el-input readonly :value="userInfo.store ? userInfo.store.title : ''"></el-input>
                                </el-form-item>
                                <el-form-item label="余额">
                                    <el-input readonly v-model="userInfo.balance"></el-input>
                                </el-form-item>
                                <el-form-item label="积分">
                                    <el-input readonly v-model="userInfo.integral"></el-input>
                                </el-form-item>
                                <el-form-item label="会员等级">
                                    <el-input readonly v-model="userInfo.vip_name"></el-input>
                                </el-form-item>
                                <el-form-item label="赠送服务次数">
                                    <el-input readonly v-model="userInfo.service_number"></el-input>
                                </el-form-item>
                                <el-form-item label="头围">
                                    <el-input readonly v-model="userInfo.header"></el-input>
                                </el-form-item>
                                <el-form-item label="前后">
                                    <el-input readonly v-model="userInfo.around"></el-input>
                                </el-form-item>
                                <el-form-item label="左右">
                                    <el-input readonly v-model="userInfo.about"></el-input>
                                </el-form-item>
                                <el-form-item label="兴趣爱好">
                                    <el-input readonly v-model="userInfo.user_like"></el-input>
                                </el-form-item>
                                <el-form-item label="备注" class="vs-w-500">
                                    <el-input readonly type="textarea" v-model="userInfo.remarks"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                    <div v-else class="info2">该用户尚未注册会员！</div>
                </div>
            </div>
            <div class="vs-table-box">
                <div class="centerInfo">
                    <div class="left_center_info">
                        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                            <!--  -->
                            <el-tab-pane :label="item.title" :name="item.name" :disabled="item.islogin && !userInfo.id" v-for="(item, index) in titleList" :key="index" class="e_tab_pane" :lazy="true">
                                <!-- 服务列表 -->
                                <div v-if="item.name == 1">
                                    <el-form inline>
                                        <el-form-item label="价格：" style="margin-left: 20px">
                                            <el-input v-model="paging.min_price" v-enter-money clearable class="vs-w-100"></el-input>
                                            <span class="vs-m-l-10 vs-m-r-10">~</span>
                                            <el-input v-model="paging.max_price" v-enter-money clearable class="vs-w-100"></el-input>
                                        </el-form-item>
                                        <el-form-item label="">
                                            <el-input @keyup.enter.native="handleCurrentChange(1)" :placeholder="item.placeholder" v-model="paging.title" style="width: 300px" v-if="index < 2">
                                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                                <template slot="append">
                                                    <div class="inquire" @click="handleCurrentChange(1)" slot="append">查询</div>
                                                </template>
                                            </el-input>
                                        </el-form-item>
                                    </el-form>
                                    <div class="tab">
                                        <el-table :data="tableData" style="width: 100%" border v-loading="loading">
                                            <el-table-column label="序号" type="index" :index="count" width="55" align="center"> </el-table-column>
                                            <!-- <el-table-column prop="number" label="编号" align="center" min-width="130" show-overflow-tooltip> </el-table-column> -->
                                            <el-table-column prop="name" label="项目名称" align="center" min-width="100" show-overflow-tooltip>
                                                <template slot-scope="scope">
                                                    <el-link type="primary" @click="chooseName(scope.row)">{{ scope.row.name }}</el-link>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="price" label="单价" align="center"> </el-table-column>
                                        </el-table>
                                    </div>
                                </div>
                                <!-- 洗护列表 -->
                                <div v-if="item.name == 2">
                                    <el-form inline>
                                        <el-form-item label="价格：" style="margin-left: 20px">
                                            <el-input v-model="paging.min_price" v-enter-money clearable class="vs-w-100"></el-input>
                                            <span class="vs-m-l-10 vs-m-r-10">~</span>
                                            <el-input v-model="paging.max_price" v-enter-money clearable class="vs-w-100"></el-input>
                                        </el-form-item>
                                        <el-form-item label="">
                                            <el-input @keyup.enter.native="handleCurrentChange(1)" :placeholder="item.placeholder" v-model="paging.keywords" style="width: 300px" v-if="index < 2">
                                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                                <template slot="append">
                                                    <div class="inquire" @click="handleCurrentChange(1)" slot="append">查询</div>
                                                </template>
                                            </el-input>
                                        </el-form-item>
                                    </el-form>
                                    <div class="tab">
                                        <el-table :data="tableData" style="width: 100%" border v-loading="loading">
                                            <!-- <el-table-column label="序号" type="index" :index="count" width="55" align="center">
                                            </el-table-column> -->
                                            <el-table-column prop="number" label="编号" align="center" min-width="100" show-overflow-tooltip> </el-table-column>
                                            <el-table-column prop="title" label="产品名称" align="center">
                                                <template slot-scope="scope">
                                                    <el-link type="primary" @click="chooseName(scope.row)">{{ scope.row.title }}</el-link>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="sku_text" label="规格" align="center"> </el-table-column>
                                            <el-table-column prop="sale_price" label="单价" align="center"> </el-table-column>
                                            <el-table-column prop="stock_count" label="库存数量" align="center"> </el-table-column>
                                        </el-table>
                                    </div>
                                </div>
                                <!-- 定制成品/毛坯列表 -->
                                <div v-if="item.name == 3 || item.name == 4">
                                    <el-form inline>
                                        <el-form-item label="" v-if="item.name == 4">
                                            <el-radio-group @change="changeisSelect" v-model="isSelect" size="medium">
                                                <el-radio-button :label="1">标准毛坯</el-radio-button>
                                                <el-radio-button :label="2">定制毛坯</el-radio-button>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item label="价格：" style="margin-left: 20px">
                                            <el-input v-model="paging.min_price" v-enter-money clearable class="vs-w-100"></el-input>
                                            <span class="vs-m-l-10 vs-m-r-10">~</span>
                                            <el-input v-model="paging.max_price" v-enter-money clearable class="vs-w-100"></el-input>
                                        </el-form-item>
                                        <el-form-item label="">
                                            <el-input @keyup.enter.native="handleCurrentChange(1)" :placeholder="item.placeholder" v-model="paging.keywords" class="vs-w-300">
                                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                                <template slot="append">
                                                    <div class="inquire" @click="handleCurrentChange(1)" slot="append">查询</div>
                                                </template>
                                            </el-input>
                                        </el-form-item>
                                    </el-form>
                                    <div class="tab">
                                        <el-table :data="tableData" style="width: 100%" border :key="1" v-loading="loading">
                                            <!-- <el-table-column label="序号" type="index" :index="count" width="55" align="center">
                                            </el-table-column> -->
                                            <el-table-column prop="number" label="编号" align="center" min-width="100" show-overflow-tooltip> </el-table-column>
                                            <el-table-column label="产品名称" align="center" min-width="185">
                                                <template slot-scope="scope">
                                                    <el-link type="primary" @click="chooseName(scope.row)">{{ scope.row.title }}</el-link>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="roughcast" label="毛坯种类" align="center" width="100"> </el-table-column>
                                            <el-table-column prop="needle" label="递针类型" align="center" width="85"> </el-table-column>
                                            <el-table-column prop="size" label="尺寸" align="center" width="85"> </el-table-column>
                                            <el-table-column prop="length" label="长度" align="center" width="85"> </el-table-column>
                                            <el-table-column prop="sex" label="性别" align="center" width="55"> </el-table-column>
                                            <el-table-column prop="colour" label="颜色" align="center" width="85"> </el-table-column>
                                            <el-table-column prop="sale_price" label="金额" align="center" width="85">
                                                <template slot-scope="scope">
                                                    <div style="color: red">
                                                        {{ scope.row.sale_price }}
                                                    </div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="stock_count" label="库存数量" align="center" width="85"> </el-table-column>
                                        </el-table>
                                    </div>
                                </div>
                                <!-- 标准成品列表 -->
                                <div v-if="item.name == 6">
                                    <el-form inline>
                                        <el-form-item label="">
                                            <el-radio-group @change="handleCurrentChange(1)" v-model="sex_type" size="medium">
                                                <el-radio-button :label="354">女款</el-radio-button>
                                                <el-radio-button :label="353">男款</el-radio-button>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item label="价格：" style="margin-left: 20px">
                                            <el-input v-model="paging.min_price" v-enter-money clearable class="vs-w-100"></el-input>
                                            <span class="vs-m-l-10 vs-m-r-10">~</span>
                                            <el-input v-model="paging.max_price" v-enter-money clearable class="vs-w-100"></el-input>
                                        </el-form-item>
                                        <el-form-item label="">
                                            <el-input @keyup.enter.native="handleCurrentChange(1)" :placeholder="item.placeholder" v-model="paging.keywords" class="vs-w-300 vs-m-b-10">
                                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                                <template slot="append">
                                                    <div class="inquire" @click="handleCurrentChange(1)" slot="append">查询</div>
                                                </template>
                                            </el-input>
                                        </el-form-item>
                                    </el-form>
                                    <div class="tab">
                                        <el-table :data="tableData" style="width: 100%" border :key="1" v-loading="loading">
                                            <el-table-column label="序号" type="index" :index="count" width="55" align="center"> </el-table-column>
                                            <el-table-column prop="number" label="编号" align="center" min-width="100" show-overflow-tooltip> </el-table-column>
                                            <el-table-column label="产品名称" align="center" min-width="185">
                                                <template slot-scope="scope">
                                                    <el-link type="primary" @click="chooseName(scope.row)">{{ scope.row.title }}</el-link>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="item" label="款号" show-overflow-tooltip align="center" width="95"> </el-table-column>
                                            <el-table-column prop="roughcast" label="毛坯种类" show-overflow-tooltip align="center" width="100"> </el-table-column>
                                            <el-table-column prop="size" label="尺寸" show-overflow-tooltip align="center" width="85"> </el-table-column>
                                            <el-table-column prop="colour" label="颜色" show-overflow-tooltip align="center" width="85"> </el-table-column>
                                            <el-table-column prop="sale_price" label="金额" show-overflow-tooltip align="center" width="85">
                                                <template slot-scope="scope">
                                                    <div style="color: red">
                                                        {{ scope.row.sale_price }}
                                                    </div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="stock_count" label="库存数量" align="center" width="85"> </el-table-column>
                                        </el-table>
                                    </div>
                                </div>

                                <div class="paging" style="margin-top: 30px">
                                    <el-pagination background layout="prev, pager, next" :current-page.sync="paging.page" :total="paging.total" :page-size="paging.limit" @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页"> </el-pagination>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <div class="right_center_info">
                        <div class="tit">{{ payForm.id ? '订单尾款' : '消费列表' }}</div>
                        <div class="tab">
                            <el-table :data="tabData" style="width: 100%" default-expand-all height="590px">
                                <el-table-column type="expand" label="展开" default-expand-all>
                                    <template slot-scope="scope">
                                        <template v-if="scope.row.commission.length">
                                            <div v-for="(item, index) in scope.row.commission" :key="index" class="user_info_css">
                                                <div class="user_n">
                                                    <el-tooltip class="item" effect="dark" :content="item.info" placement="top">
                                                        <div class="user_name">
                                                            {{ item.info }}
                                                        </div>
                                                    </el-tooltip>
                                                    <div class="user_select">
                                                        <el-select style="width: 120px" clearable v-model="item.type" placeholder="请选择" @change="changeType(item, scope.row.commission)">
                                                            <el-option v-for="(el, eli) in ['销售提成', '安装提成']" :key="eli" :disabled="scope.row.commission.some((v) => v.type == eli + 1 && item.info == v.info)" :label="el" :value="eli + 1"> </el-option>
                                                            <!-- <el-option label="" :value="2"> </el-option> -->
                                                        </el-select>
                                                    </div>
                                                </div>
                                                <template v-if="item.isShow">
                                                    <!-- <div class="radio_css"> -->
                                                    <el-radio v-model="item.is_type" @change="setCommission(item)" :label="1" size="mini">固定(元/次)</el-radio>
                                                    <el-radio v-model="item.is_type" @change="setCommission(item)" :label="2" size="mini">比例%</el-radio>
                                                    <!-- </div> -->
                                                    <div class="money_css">
                                                        <el-input type="number" style="width: 100px" :min="0" v-model="item.value" placeholder=""></el-input>
                                                    </div>
                                                </template>
                                                <div class="money_css">
                                                    <i class="el-icon-delete-solid icon-btn" @click="handle_click(item, 3, scope.$index, index)"></i>
                                                </div>
                                            </div>
                                        </template>
                                        <template v-else>
                                            <div style="display: flex; justify-content: center">暂无员工</div>
                                        </template>
                                    </template>
                                </el-table-column>
                                <!-- <el-table-column label="序号" type="index" :index="count" width="55" align="center">
                                </el-table-column> -->
                                <el-table-column prop="name" min-width="150" show-overflow-tooltip label="名称" align="center"> </el-table-column>
                                <el-table-column label="单价" align="center" width="120px">
                                    <template slot-scope="scope">
                                        <el-input @change="thisMaxValue(scope.row)" v-enter-money v-model="scope.row.price" :readonly="isReply" placeholder=""></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column label="折扣率" align="center" width="120px">
                                    <template slot-scope="scope">
                                        <el-input @change="thisMaxValue(scope.row)" :readonly="isReply" v-enter-money :max="9.99" v-model="scope.row.discount_rate" placeholder="">
                                            <span class="vs-input-right" slot="suffix">折</span>
                                        </el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column label="折后额" align="center" width="120px">
                                    <template slot-scope="scope">
                                        <el-input @change="thisMaxValue(scope.row, 2)" v-enter-money :readonly="isReply" v-model="scope.row.discountPrice" placeholder=""></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column label="数量" align="center" width="120px">
                                    <template slot-scope="scope">
                                        <el-input-number @change="thisMaxValue(scope.row)" :disabled="isReply" v-model="scope.row.number" :min="1" size="mini" style="width: 100%"></el-input-number>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" min-width="120" fixed="right" align="center">
                                    <div slot-scope="scope" class="ac-c">
                                        <!-- el-icon-circle-plus icon-btn -->
                                        <div>
                                            <el-link type="danger" @click="handle_click(scope.row, 1, scope.$index)">选择员工</el-link>
                                        </div>
                                        <div style="margin-top: 5px">
                                            <i class="el-icon-delete-solid icon-btn" v-if="!payForm.id" @click="handle_click(scope.row, 2, scope.$index)"></i>
                                        </div>
                                    </div>
                                </el-table-column>
                            </el-table>
                            <div class="flex vs-m-t-20">
                                <div class="ws-n vs-m-t-5">订单备注：</div>
                                <el-input v-model="payForm.remarks" :rows="4" placeholder="请输入订单备注" type="textarea"></el-input>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="settlement" :style="isReply ? 'width:90%' : ''">
                    <!-- <div>
                        <div>订单备注：</div>
                        <el-input type="textarea " v-model="payForm.remarks" style="width: 200px"></el-input>
                    </div> -->
                    <div>共计 {{ tabData.length }} 项</div>
                    <div v-if="isReply">
                        预付款：
                        <span style="color: red; font-size: 20px" class="vs-m-r-40">￥{{ orderInfo.advance_amount }}</span>
                        尾款金额：
                        <span style="color: red; font-size: 20px">￥{{ orderInfo.balance_meet_amount }}</span>
                    </div>
                    <div v-else>
                        合计消费：
                        <span style="color: red; margin-left: 40px; font-size: 20px">￥{{ pay_amount }}</span>
                    </div>
                    <el-button type="primary" class="vs-w-100" :round="true" @click="pay" v-if="tabData.length">结 算</el-button>
                </div>
            </div>
            <!-- 选择员工 -->
            <el-dialog title="" :visible.sync="dialogVisible2" width="500px" @close="dialogBeforeClose" :center="true">
                <div slot="title">选择人员</div>
                <div class="dlog_body">
                    <el-table :data="userList" style="width: 80%" height="400">
                        <el-table-column prop="number" label="工号"> </el-table-column>
                        <el-table-column prop="name" label="姓名"> </el-table-column>
                        <el-table-column prop="position.name" label="职位"> </el-table-column>
                        <!-- <el-table-column prop="department" label="部门"> </el-table-column> -->
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.isSelect"></el-checkbox>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div slot="footer">
                    <el-button @click="dialogBeforeClose">取 消</el-button>
                    <el-button type="primary" :loading="isBtn" @click="chooseStaff">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 确认结算 -->
            <el-dialog title="" :visible.sync="dialogVisible4" width="700px" @close="dialogVisible4Close" :center="true">
                <div slot="title">确认结算</div>
                <div class="dlog_body" style="flex-direction: column">
                    <div class="tit">
                        金额:<span style="color: red; margin-left: 40px; font-size: 20px">￥{{ pay_amount }}</span>
                    </div>
                    <div class="body_one">
                        <div class="title">付款方式：</div>
                        <div class="optionsWrap">
                            <el-radio-group v-model="radio">
                                <el-radio size="mini" :disabled="radio == 3" :label="1">全款</el-radio>
                                <el-radio size="mini" :disabled="isAdvanceCharge" :label="2">
                                    预付
                                    <el-input size="mini" v-enter-money v-model="payForm.advance_amount" @input="(e) => (payForm.advance_amount > Number(pay_amount) ? (payForm.advance_amount = pay_amount) : '')" :disabled="radio != 2"></el-input>
                                    <span>元</span>
                                </el-radio>
                                <el-radio size="mini" :disabled="radio != 3" :label="3">
                                    尾款
                                    <el-input size="mini" v-model="payForm.balance_amount" :disabled="radio != 3"></el-input>
                                    <span>元</span>
                                </el-radio>
                            </el-radio-group>
                        </div>
                        <el-switch v-model="payForm.is_consumption" active-text="是否赠送洗护服务" v-if="(tabIndex == 2 || tabIndex == 3 || tabIndex == 5) && (radio == 1 || radio == 3)" active-value="1" inactive-value="0"> </el-switch>
                    </div>
                    <div class="body_one">
                        <div class="title">支付方式：</div>
                        <div class="paymentList">
                            <template v-for="(ele, index) in payment">
                                <template v-if="index != 5 || tabIndex == 0">
                                    <div v-if="!(ele.islogin && !userInfo.id)" class="list" :class="{ 'active-list': isPay(index + 1) }" :key="index" @click="changeToggle(index)">
                                        <i class="iconfont" :class="ele.icon"></i>
                                        <p>{{ ele.title }}</p>
                                    </div>
                                </template>
                            </template>
                        </div>
                    </div>
                    <div class="body_one">
                        <div class="title">支付明细:</div>
                        <div class="detailsWrap">
                            <div v-for="item in payForm.payType" :key="item.type" class="list">
                                <template v-if="item.type == 6">
                                    <p>洗护次数抵扣</p>
                                    <el-input-number v-model="item.price" :min="0" :max="5" style="width: 90px" size="mini"></el-input-number>
                                    <span class="price">（赠送次数共：{{ userInfo.service_number || 0 }}次）</span>
                                </template>
                                <template v-else>
                                    <p>{{ payment[item.type - 1].title }}</p>
                                    <el-input v-model="item.price" @blur="averageScoreOfPrice()" clearable v-enter-money style="width: 200px" size="mini"></el-input>
                                </template>
                            </div>
                            <div class="list">
                                <p>{{ radio == 1 ? '开单日期' : '预付款日期' }}</p>
                                <el-date-picker size="mini" :readonly="radio == 3" v-model="payForm.bill_date" value-format="yyyy-MM-dd" style="width: 200px" type="date" placeholder="选择日期"> </el-date-picker>
                            </div>
                            <div v-if="radio == 3" class="list">
                                <p>尾款结算日期</p>
                                <el-date-picker size="mini" v-model="payForm.balance_time" value-format="yyyy-MM-dd HH:mm:ss" style="width: 200px" :clearable="false" type="datetime" placeholder="选择日期"> </el-date-picker>
                            </div>
                        </div>
                    </div>
                </div>
                <div slot="footer">
                    <el-button @click="dialogVisible4 = false">取 消</el-button>
                    <el-button type="primary" :loading="isBtn2" @click="submit">结 算</el-button>
                </div>
            </el-dialog>
            <!-- 会员充值 -->
            <el-dialog title="" :visible.sync="dialogVisible5" width="30%" :before-close="dialogBeforeClose" :center="true">
                <div slot="title">会员充值</div>
                <div class="dlog_body" style="flex-direction: column">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="会员卡号" prop="name">
                            <el-input v-model="ruleForm.name" placeholder="清输入"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="ruleForm.name" placeholder="清输入"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" prop="name">
                            <el-input v-model="ruleForm.name" placeholder="清输入"></el-input>
                        </el-form-item>
                        <el-form-item label="账户余额" prop="name">
                            <el-input v-model="ruleForm.name" placeholder="清输入"></el-input>
                        </el-form-item>
                        <el-form-item label="选择时间" prop="name">
                            <el-date-picker v-model="date" value-format="yyyy-MM-dd" style="width: 200px" type="date" placeholder="选择日期"> </el-date-picker>
                        </el-form-item>
                        <el-form-item label="充值金额" prop="name">
                            <el-input v-model="ruleForm.name" placeholder="清输入"></el-input>
                        </el-form-item>
                        <el-form-item label="充值方式" prop="name">
                            <el-select v-model="ruleForm.name" placeholder="请选择">
                                <el-option label="微信" value="微信"></el-option>
                                <el-option label="支付宝" value="支付宝"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="充值员工" prop="name">
                            <el-select v-model="ruleForm.name" placeholder="请选择">
                                <el-option label="小刘(A11)" value="shanghai"></el-option>
                                <el-option label="小张(A12)" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div slot="footer">
                    <el-button @click="dialogVisible5 = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible5 = false">立即充值</el-button>
                </div>
            </el-dialog>
            <!-- pdf打印 -->
            <el-dialog title="" :visible.sync="dialogVisible6" width="310px" :center="true">
                <div id="dayin" ref="dayin" class="receipt_body" style="font-size: 10px">
                    <div class="title" style="margin-bottom: 10px">伊薇卡-{{ detail.store.title }}</div>
                    <div v-if="detail.user">
                        <p style="height: 30px; line-height: 20px; margin: 0">会员卡号：{{ detail.user.vip_no }}</p>
                        <p style="height: 30px; line-height: 20px; margin: 0">姓名：{{ detail.user.realname }}</p>
                    </div>
                    <div class="shopInfo">
                        <div v-for="(item, i) in detail.project" :key="i">
                            <p>消费项目：{{ item.project_name }}</p>
                            <p>项目编号：{{ item.project.number }}</p>
                            <div class="titleList">
                                <!-- <p>编号</p> -->
                                <!-- <p>名称</p> -->
                                <p>数量</p>
                                <p>金额</p>
                                <!-- <p>全款</p> -->
                                <p>预付</p>
                                <p>尾款</p>
                            </div>
                            <div class="titleList">
                                <!-- <p>{{ item.project.number }}</p> -->
                                <!-- <p>{{ item.project_name }}</p> -->
                                <p>{{ item.number }}</p>
                                <p>{{ item.orders_payable }}</p>
                                <!-- <p>{{ Number(detail.advance_amount) ? 0 : detail.pay_amount }}</p> -->
                                <p>{{ detail.advance_amount || 0 }}</p>
                                <p>{{ detail.balance_amount || 0 }}</p>
                            </div>
                        </div>
                        <div v-for="item in detail.goods" :key="item.orders_id">
                            <p>消费商品：{{ item.goods_name }}</p>
                            <p>商品编号：{{ item.goods.number }}</p>
                            <div class="titleList">
                                <!-- <p>编号</p> -->
                                <!-- <p>名称</p> -->
                                <p>数量</p>
                                <p>金额</p>
                                <!-- <p>全款</p> -->
                                <p>预付</p>
                                <p>尾款</p>
                            </div>
                            <div class="titleList">
                                <!-- <p>{{ item.goods.number }}</p> -->
                                <!-- <p>{{ item.goods_name }}</p> -->
                                <p>{{ item.number }}</p>
                                <p>{{ item.orders_payable }}</p>
                                <!-- <p>{{ Number(detail.advance_amount) ? 0 : detail.pay_amount }}</p> -->
                                <p>{{ detail.advance_amount || 0 }}</p>
                                <p>{{ detail.balance_amount || 0 }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="totalPrice" style="font-size: 12px">消费合计：{{ pay_amount }}</div>
                    <div class="receiptsPrice" style="font-size: 14px">
                        实收：
                        <!-- {{ detail.paid_amount }} -->
                        <span v-if="detail.ordersPayType && detail.ordersPayType.length">{{ detail.ordersPayType[detail.ordersPayType.length - 1].price }}</span>
                        <span v-else>0.00</span>
                    </div>
                    <div class="common">订单号：{{ detail.out_trade_no }}</div>
                    <div class="common">打印时间：{{ detail.create_time }}</div>
                </div>
                <div slot="footer">
                    <el-button @click="utils.goUrl(`/orderInfo?id=${checkOutOrderId}`)">取 消</el-button>
                    <el-button type="primary" :loading="isPrint" @click="printSmallTicket">打 印</el-button>
                </div>
            </el-dialog>
            <!-- 待付尾款 -->
            <el-dialog :visible.sync="dialogVi" title="待付尾款消费列表" top="15vh" width="700px" class="pay-others" :center="true">
                <el-table :data="balanceOrder" class="vs-p-30">
                    <el-table-column label="产品名称" prop="name" min-width="130">
                        <template slot-scope="scope">
                            <div v-for="item in scope.row.project" :key="item.id">{{ item.project_name }}</div>
                            <div v-for="item in scope.row.goods" :key="item.id">{{ item.goods_name }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单金额" prop="total"></el-table-column>
                    <el-table-column label="支付金额" prop="orders_payable"></el-table-column>
                    <el-table-column label="待付尾款" prop="balance_meet_amount"></el-table-column>
                    <el-table-column label="操作" width="160px">
                        <template slot-scope="scope">
                            <div>
                                <!-- <el-link @click="setRow(1,scope.row)" type="warning">详情</el-link> -->
                                <el-link @click="setRow(1, scope.row)" class="vs-m-l-20" type="primary">去付尾款</el-link>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="paging vs-m-t-30 vs-m-l-30">
                    <el-pagination background layout="prev, pager, next" :current-page.sync="balancePaging.page" :total="balancePaging.total" :page-size="balancePaging.limit" @current-change="handleCurrentChange2" prev-text="上一页" next-text="下一页"> </el-pagination>
                </div>
                <div slot="footer">
                    <el-button @click="dialogVi = false">取 消</el-button>
                </div>
            </el-dialog>
            <vs-select-user v-model="dialogVisible3" @affirm="affirmUser" :data="vipUserList"></vs-select-user>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    import VsSelectUser from '@/components/VsSelectUser.vue';
    export default {
        components: { VsSelectUser },
        data() {
            return {
                date: '',
                keys: '',
                radio: 1,
                checkOutOrderId: '', //结账后的订单id
                recordList: [],
                isPrint: false,
                loading: false,
                loading2: false,
                isBtn: false,
                isBtn2: false,
                isInfo: false,
                dialogVisible: false,
                sex_type: '354',
                paging: {
                    title: '',
                    page: 1,
                    total: 0,
                    limit: 8,
                    min_price: '',
                    max_price: '',
                    keywords: '',
                },
                balancePaging: {
                    title: '',
                    page: 1,
                    total: 0,
                    limit: 6,
                    keywords: '',
                },
                payList: [],
                balanceOrder: [],
                payment: [
                    //支付方式
                    { title: '微信支付', icon: 'icon-weixin' },
                    { title: '支付宝支付', icon: 'icon-zhifubaozhifu' },
                    { title: '银行卡支付', icon: 'icon-yinhangqia' },
                    { title: '现金支付', icon: 'icon-xianjin' },
                    { title: '余额支付', icon: 'icon-zhanghuyue', islogin: true },
                    { title: '赠送次数抵扣', icon: 'icon-icon-zengsong', islogin: true, isServe: true },
                ],
                form: {
                    title: '',
                },
                userInfo: {},
                activeName: '1',
                isSelect: 1,
                titleList: [
                    {
                        title: '服务列表',
                        name: '1',
                        placeholder: '请输入项目名称',
                    },
                    {
                        title: '洗护列表',
                        name: '2',
                        placeholder: '请输入洗护产品名称',
                    },
                    {
                        title: '标准成品',
                        name: '6',
                        islogin: true,
                        placeholder: '',
                    },
                    {
                        title: '定制成品',
                        name: '3',
                        islogin: true,
                        placeholder: '',
                    },
                    {
                        title: '毛坯列表',
                        name: '4',
                        islogin: true,
                        placeholder: '',
                    },
                ],
                tabData: [],
                userList: [],
                vipUserList: [],
                dialogVisible2: false, //选择技师
                dialogVisible3: false, //选择vip会员
                dialogVisible4: false, //结算
                dialogVisible5: false, //充值
                dialogVisible6: false, //充值
                dialogVi: false, //尾款订单列表
                isBtn: false,
                total: 10,
                radio: 1,
                isPayTheBalance: false, //是否显示尾款订单列表
                classList: [],
                commissionList: [],
                tableData: [],
                ruleForm: {
                    remarks: '',
                },
                rules: {
                    name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
                },
                orderInfo: {}, //尾款订单详情
                payForm: {
                    id: undefined,
                    remarks: '',
                    balance_time: '',
                    advance_amount: '',
                    balance_amount: '',
                    is_consumption: 0,
                    pay_type: '1',
                    type: 2,
                    pay_amount: '',
                    deduction_number: '',
                    bill_date: '',
                    payType: [],
                },
                tabIndex: 0,
                childIndex: 0,
                commission: [],
                detail: {
                    user: {},
                    store: {},
                    project: [],
                },
            };
        },
        watch: {
            keys: function (n, o) {
                if (n.length >= 10) {
                    this.select_vip_input(1);
                    // console.log(n);
                }
            },
            dialogVisible4(val) {
                // if(!val&&this.$route.query.order_id){
                //     this.tabData = [];
                // }
            },
        },
        computed: {
            isAdvanceCharge() {
                return this.radio == 3 || !this.userInfo.id || Number(this.pay_amount) == 0 || this.activeName == 1 || this.activeName == 2;
            },
            pay_amount() {
                //
                let sum = 0;
                for (let i in this.tabData) {
                    // sum += this.tabData[i].price * this.tabData[i].number - this.tabData[i].discountPrice
                    sum += Number(this.tabData[i].discountPrice);
                }
                return sum.toFixed(2);
            },
            isReply() {
                return this.payForm.id ? true : false;
            },
        },
        async created() {
            let { vip_no, order_id, user_id, demandNote } = this.$route.query;
            let { projectList } = this.$route.params;
            if (vip_no) {
                this.keys = vip_no;
                await this.select_vip_input();
            }
            if (sessionStorage.getItem('cashier_user_id')) {
                user_id = sessionStorage.getItem('cashier_user_id');
                sessionStorage.removeItem('cashier_user_id');
            }
            if (user_id) {
                await this.queryUserInformation(user_id);
            }
            if (projectList) {
                this.tabIndex = 0;
                // this.chooseName(projectList[0])
                projectList.forEach((v) => {
                    this.chooseName(v.project);
                });
            }
            if (order_id) {
                //结尾款订单
                await this.getOrderBalancePayment(order_id);
            } else {
                //   获取当前日期
                let data = new Date();
                this.date = this.utils.time(data);
                this.payForm.bill_date = this.utils.time(data);
            }
            this.getStaff();
            this.handleCurrentChange(1);

            //打印小票测试
            // if(){
            // this.printSmallTicketFunt('120245', 'S920201605856');
            // }
            // let res = await this.$Http.getOrders({
            //     id:  "37",
            //     out_trade_no: "S493422985930",
            // });
            // if (res.code) {
            //     this.detail = res.data
            // }
            // setTimeout(() => {
            //     this.dialogVisible6 = true;
            // });
        },
        methods: {
            thisMaxValue(row, type) {
                let totalPrice = row.price * row.number;
                if (type == 2) {
                    row.discount_amount = (totalPrice - row.discountPrice).toFixed(2);
                    return;
                }
                if (row.discount_rate > 10) {
                    row.discount_rate = 9.99;
                }
                if (!row.discount_rate) return (row.discountPrice = totalPrice);
                row.discountPrice = (totalPrice * (row.discount_rate / 10)).toFixed(2);
                row.discount_amount = (totalPrice - row.discountPrice).toFixed(2);
            },
            async setRow(type = 1, row) {
                if (type == 1) {
                    this.utils.goUrl(`/orderInfo?id=${row.id}`);
                } else {
                    await this.getOrderBalancePayment(row.id);
                    this.handleCurrentChange(1);
                }
            },
            async getOrderBalancePayment(order_id, demandNote) {
                let { code, data } = await this.$Http.getOrders({
                    id: order_id,
                });
                if (code) {
                    this.orderInfo = data;
                    this.radio = 3;
                    // this.dialogVisible4 = true;
                    this.dialogVi = false;
                    this.payForm.balance_amount = data.balance_meet_amount;
                    this.payForm.id = data.id;
                    this.payForm.remarks = data.remarks;
                    this.payForm.bill_date = data.bill_date;
                    this.commission = data.commission;
                    if (this.payForm.project?.length) {
                        //服务项目
                        this.tabIndex = 0;
                        this.activeName = '1';
                    } else {
                        let goods = data?.goods?.[0]?.goods;
                        // console.log(goods, 'goodsgoodsgoods');
                        switch (goods?.type) {
                            case 4: //洗护列表
                                this.tabIndex = 1;
                                this.activeName = '2';
                                break;
                            case 1: //毛坯
                                this.tabIndex = 3;
                                this.activeName = '4';
                                this.payForm.is_consumption = '1';
                                break;
                            case 6: //标准成品
                                break;
                            case 2: //定制成品
                                if (goods.roughcast_type == 1) {
                                    //标准
                                    this.tabIndex = 5;
                                    this.activeName = '6';
                                } else {
                                    //定制
                                    this.tabIndex = 2;
                                    this.activeName = '3';
                                }
                                this.payForm.is_consumption = '1';
                                break;
                            default:
                                break;
                        }
                    }
                    // if(data.type==1||data.type==2){
                    //     this.tabIndex = 3;
                    //     this.payForm.is_consumption = '1';
                    // }
                    data.project.forEach((v) => {
                        v.name = v.project_name;
                        v.keyid = v.id;
                        v.id = demandNote || v.project_id;
                        this.chooseName(v, 2);
                    });
                    data.goods.forEach((v) => {
                        v.name = v.title || v.goods_name;
                        v.keyid = v.id;
                        v.id = demandNote || v.goods_id;
                        v.roughcast_type = v?.goods.roughcast_type;
                        this.chooseName(v, 2);
                    });
                }
            },
            setCommission(item) {
                for (let v of this.commissionList) {
                    if (item.type == v.type && item.is_type == v.royalty_type) {
                        item.value = v.ratio;
                        return;
                    } else item.value = '';
                }
            },
            printSmallTicket() {
                let ref = this.$refs.dayin;
                this.$print(ref);
                this.dialogVisible6 = false;
                this.utils.goUrl(`/orderInfo?id=${this.checkOutOrderId}`);
                // this.utils.goUrl(`/orderInfo?id=131676`);
                // this.utils.getPdf('dayin', '小票', this);
            },
            isPay(type) {
                return this.payForm.payType.findIndex((v) => v.type == type) != -1;
            },
            async getOrdersBalance() {
                //查询尾款
                let { code, data } = await this.$Http.getOrdersBalance({ ...this.balancePaging, user_id: this.userInfo.id });
                // console.log(code, data);
                if (code && data?.data?.length) {
                    this.balanceOrder = data.data;
                    this.balancePaging.total = data.total;
                    this.dialogVi = true;
                }
                this.isPayTheBalance = false;
            },
            dialogVisible4Close(type = 1) {
                //2:pdf取消
                // this.payForm = this.$options.data().payForm;
                this.radio != 3 ? (this.radio = 1) : '';
                this.payForm.advance_amount = '';
                let data = new Date();
                this.payForm.payType = [];
                this.payForm.bill_date = this.utils.time(data);
                this.dialogVisible6 = false;
            },
            changeType(item, commission) {
                let isblo = true;
                // 重置
                // for (let val of commission) {
                //     val.isShow = false;
                //     if(val.type == 1&&isblo){
                //         val.isShow = true;
                //         isblo = false;
                //     }
                // }
                for (let val of commission) {
                    val.isShow = false;
                }
                // 逐一判断
                for (let val of commission) {
                    if (val.type == 1) {
                        val.isShow = true;
                        break;
                    }
                }
                for (let val of commission) {
                    if (val.type == 2) {
                        val.isShow = true;
                        break;
                    }
                }
                this.setCommission(item);
            },
            async submit() {
                let num = 0;
                let obj = Object.assign({}, this.payForm);
                let keprice = ['', this.pay_amount, obj.advance_amount, obj.balance_amount][this.radio];
                if (obj.payType.length == 0 && keprice > 0) return this.$message.error('请选择支付方式');
                if (this.radio == 2 && !obj.advance_amount) return this.$message.error('请输入预付款金额');
                // if (this.radio == 2 && !obj.balance_time) return this.$message.error("请选择尾款结算日期");
                for (let val of obj.payType) {
                    if (!val.price) return this.$message.error(`请输入${this.payment[val.type - 1].title}金额`);
                    if (val.type == 6) {
                        obj.deduction_number = val.price;
                    } else num += Number(val.price);
                }
                if (obj?.payType?.[0]?.type != 6) {
                    if (num > keprice) {
                        return this.$message.error('支付金额不能大于总金额');
                    } else if (num < keprice) return this.$message.error('支付金额不能小于总金额');
                }
                // console.log('@####', this.tabData);
                let a = JSON.parse(JSON.stringify(this.tabData));
                a.forEach((v) => {
                    // if(!obj.id){
                    v.commission = v.pushMoney;
                    delete v.pushMoney;
                    // }
                });
                // a[0].commission = this.commission
                obj.user_id = this.userInfo.id || 0;
                obj.data = JSON.stringify(a); //
                obj.pay_amount = num;
                // 全款
                if (this.radio == 1) {
                    obj.advance_amount = '';
                }
                if (this.radio == 2) {
                    // 只有选择全款或者尾款时才会显示
                    obj.is_consumption = 0;
                }
                obj.pay_type = obj.payType.map((v) => v.type).join(',');
                obj.payType = JSON.stringify(obj.payType);
                // console.log(obj, '生成订单');
                this.isBtn2 = true;
                let { code, data } = await this.$Http.createOrder(obj);
                this.isBtn2 = false;
                if (code) {
                    this.checkOutOrderId = data.order_id;
                    //如果是服务项目或者洗护商品 直接调已完成接口
                    if (this.activeName == 1 || this.activeName == 2) {
                        this.$Http.queryOrders({ orders_id: data.order_id });
                    }
                    this.dialogVisible4 = false;
                    this.$confirm('是否需要打印小票？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    })
                        .then(async () => {
                            this.printSmallTicketFunt(data.order_id, data.out_trade_no);
                        })
                        .catch(async () => {
                            this.utils.goUrl(`/orderInfo?id=${data.order_id}`);
                        })
                        .finally(async () => {
                            this.payForm = this.$options.data().payForm;
                            this.radio = 1;
                            let date = new Date();
                            this.payForm.bill_date = this.utils.time(date);
                        });
                }
            },
            async printSmallTicketFunt(id, out_trade_no) {
                //打印小票
                let res = await this.$Http.getOrders({
                    id: id,
                    out_trade_no: out_trade_no,
                });
                if (res.code) {
                    this.detail = res.data;
                }
                setTimeout(() => {
                    this.dialogVisible6 = true;
                });
            },
            changeToggle(index) {
                // 赠送次数抵扣
                let i = this.payForm.payType.findIndex((v) => v.type == index + 1);
                let len = this.payForm.payType.length;
                if (i != -1) {
                    this.payForm.payType.splice(i, 1);
                } else {
                    if (index == 5 && len > 0) {
                        return this.$message.error('支付方式多选不包括赠送次数抵扣');
                    } else if (this.isPay(6)) this.payForm.payType = [];
                    this.payForm.payType.push({
                        type: index + 1,
                        price: index == 5 ? 0 : '',
                    });
                }
                this.averageScoreOfPrice(3);
            },
            averageScoreOfPrice(type) {
                //计算价格平均分
                //应付总价
                let keprice = ['', this.pay_amount, this.payForm.advance_amount, this.payForm.balance_amount][this.radio];
                let len = this.payForm.payType.length,
                    i = 0;
                if (len == 0) return;
                // console.log(keprice, '应付总价', len, type);
                // if (type === 2) {//均分
                //     this.payForm.payType.forEach((v, index) => {
                //         if (index == len - 1 && len > 1) {
                //             console.log(keprice, i, index);
                //             v.price = Number(keprice - i).toFixed(2);
                //         } else {
                //             v.price = Number(keprice / len).toFixed(2);
                //             i += Number(v.price)
                //         }
                //     })
                //     return
                // }
                //计算最后一个值
                if (len == 1) {
                    this.payForm.payType[0].price = keprice;
                    return;
                } else if (type == 3) {
                    this.payForm.payType[0].price = '';
                }
                this.payForm.payType.forEach((v) => {
                    if (!v.price && v.type != 6) {
                        i++;
                    } else keprice -= v.price;
                });
                if (i == 1 && Number(keprice) > 0) {
                    this.payForm.payType.forEach((v) => {
                        if (!v.price) {
                            v.price = Number(keprice);
                        }
                    });
                }
            },
            pay() {
                for (let v of this.tabData) {
                    let arr = [],
                        arr2 = v.commission,
                        pushMoney = [],
                        arr1 = [];
                    if (!arr2.length) {
                        return this.$message.warning('请添加员工');
                    }
                    for (let i in arr2) {
                        if (!arr2[i].type || (arr2[i].isShow && !arr2[i].value)) {
                            return this.$message.warning('请选择提成类型和比列');
                        }
                        if (arr2[i].type == 1) {
                            arr.push(arr2[i].staff);
                        } else {
                            arr1.push(arr2[i].staff);
                        }

                        if (arr2[i].type == 1 && arr2[i].isShow) {
                            pushMoney.push({
                                type: 1,
                                is_type: arr2[i].is_type,
                                value: arr2[i].value,
                                staff: arr,
                            });
                        }
                        if (arr2[i].type == 2 && arr2[i].isShow) {
                            pushMoney.push({
                                type: 2,
                                is_type: arr2[i].is_type,
                                value: arr2[i].value,
                                staff: arr1,
                            });
                        }
                    }
                    v.pushMoney = pushMoney;
                }
                //只有毛坯列表和成品列表才会显示 是否赠送洗护服务
                if (this.tabIndex == 2 || this.tabIndex == 3 || this.tabIndex == 5) {
                    this.payForm.is_consumption = '1';
                } else this.payForm.is_consumption = '0';
                this.payForm.pay_amount = this.pay_amount;
                this.dialogVisible4 = true;

                if (this.isReply) {
                    this.payForm.balance_time = this.$moment().format('YYYY-MM-DD HH:mm:ss');
                }
            },
            async chooseStaff() {
                // console.log(this.childIndex);
                this.isBtn = true;
                for (let i in this.userList) {
                    // &&!this.tabData[this.childIndex].commission.some(v=>v.staff==this.userList[i].id)
                    if (this.userList[i].isSelect) {
                        // console.log(this.userList[i]);
                        // let index = this.tabData[this.childIndex].commission.findIndex((it) => it.staff == this.userList[i].id);
                        // if (index == -1) {
                        this.tabData[this.childIndex].commission.push({
                            type: '',
                            is_type: 1,
                            value: '',
                            staff: this.userList[i].id,
                            info: this.userList[i]?.name + '-' + (this.userList[i]?.position?.name || '无'),
                            isShow: false,
                        });
                        let goods = this.tabData[this.childIndex];
                        let { code, data } = await this.$Http.getRoyalty({
                            position_type: this.userList[i].position?.id,
                            project_id: goods.type == 1 ? goods.id : '',
                            goods_id: goods.type != 1 ? goods.id : '',
                            item_type: goods.type == 1 ? 1 : 2,
                        });
                        if (code) {
                            // console.log('提成', data);
                            this.commissionList = data;
                        }
                        // }
                    }
                }
                this.isBtn = false;
                this.dialogVisible2 = false;
                // console.log(this.tabData);
            },
            async getStaff() {
                let { code, data } = await this.$Http.getStaff({
                    is_all: 1,
                    status: 1,
                });
                if (code) {
                    this.userList = data;
                    for (let o of this.userList) {
                        this.$set(o, 'isSelect', false);
                    }
                }
            },
            count(index) {
                return (this.paging.page - 1) * this.paging.limit + index + 1;
            },
            async chooseName(row, type = 1) {
                //type:2 支付尾款
                // type==1?this.tabData = []:"";
                // console.log(row);
                // if (!this.userInfo.id) {
                //     return this.$message.warning('请先查找会员信息')
                // }
                if (type == 1) {
                    this.radio = 1;
                    this.payForm.balance_amount = '';
                    if (this.payForm.id) {
                        this.payForm.id = undefined;
                        this.tabData = [];
                    }
                    //没有选择用户的情况下无法选赠送护理
                    if (!this.userInfo.id && row.id == 4) {
                        return this.$message.warning('赠送护理需要先选择会员用户');
                    }
                }

                if (this.tabData.some((v) => v.id == row.id)) return;
                //roughcast_type 1标准 2定制
                this.payForm.type = row.roughcast_type == 2 ? 1 : 2;
                let commission = [];
                // 尾款订单重新选员工
                // this.commission.forEach(v => {
                //     if (v.goods_id == row.keyid || v.project_id == row.keyid) {
                //         if(commission.some(v2=>v2.))
                //         commission.push({
                //             "type":v.type,
                //             info:v.staff.name,
                //             "is_type":v.is_type,
                //             "value":v.value,
                //             "staff":v.staff.id,
                //             isShow: true
                //         });
                //     }
                // })
                if (this.tabIndex == 0) {
                    // console.log('项目');
                    let { code, data } = await this.$Http.getDiscount({ type: 1, value_id: row.id, vip_id: this.userInfo.vip_id });
                    let discountPrice = Number(data ? row.price * (data / 10) : row.price).toFixed(2);
                    if (code) {
                        this.tabData.push({
                            id: row.id,
                            type: 1,
                            discount_rate: type == 2 ? row.discount_rate : data,
                            name: row.name,
                            price: row.price || '0.00',
                            number: 1,
                            discountPrice: type == 2 ? row.orders_payable : discountPrice,
                            discount_amount: 0,
                            commission,
                            is_deposit: row.is_deposit,
                        });
                    }
                } else {
                    // console.log('商品');
                    let { code, data } = await this.$Http.getDiscount({ type: 2, value_id: row.id, vip_id: this.userInfo.vip_id });
                    // row.sale_price = row.sale_price?row.sale_price:row.price;
                    let discountPrice = Number(data ? row.sale_price * (data / 10) : row.sale_price).toFixed(2);
                    if (code) {
                        let name = '';
                        switch (Number(this.tabIndex)) {
                            case 1: //洗护
                                name = `${row.title} ${row.sku_text}`;
                                break;
                            case 5: //标准成品
                                name = `${row.title} ${row.sex_type == 353 ? '男款' : '女款'} ${row.item} ${row.roughcast} ${row.size} ${row.colour}`;
                                break;
                            default:
                                //定制成品/毛坯情况
                                name = `${row.title}  ${row.roughcast} ${row.needle} ${row.size} ${row.length} ${row.sex} ${row.colour}`;
                                break;
                        }
                        this.tabData.push({
                            id: row.id,
                            type: 2,
                            name: type == 2 ? row.name : name,
                            discount_rate: type == 2 ? row.discount_rate : data,
                            price: row.sale_price || row.price || '0.00',
                            number: 1,
                            discountPrice: type == 2 ? row.orders_payable : discountPrice,
                            discount_amount: 0,
                            commission,
                        });
                    }
                }
            },
            changeisSelect(flag) {
                this.isSelect = flag;
                this.handleCurrentChange(1);
            },
            async getProject() {
                let obj = Object.assign({}, this.paging);
                this.loading = true;
                if (this.tabIndex > 0) {
                    switch (Number(this.tabIndex)) {
                        case 1: //洗护列表
                            obj.type = 4;
                            break;
                        case 2: //定制成品列表
                            obj.type = 2;
                            obj.roughcast_type = 2;
                            break;
                        case 3: //毛坯列表
                            obj.type = 1;
                            break;
                        case 5: //标准成品
                            obj.type = 6;
                            obj.roughcast_type = 1;
                            obj.sex_type = this.sex_type;
                            break;
                    }
                    if (this.tabIndex == 3) {
                        //商品二级类型 1标准 2定制 (类型为 毛坯 成品 传值)
                        obj.roughcast_type = this.isSelect == 1 ? 1 : 2;
                    }
                    var { code, data } = await this.$Http.getCategoryGoodsLists(obj);
                } else {
                    var { code, data } = await this.$Http.getProject(obj);
                }
                this.loading = false;
                if (code) {
                    this.tableData = data.data;
                    this.paging.total = data.total;
                }
            },
            affirmUser(val) {
                //查询用户信息回调
                this.userInfo = val || {};
                this.form.user_id = val.id;
                if (this.isPayTheBalance) this.getOrdersBalance();
                this.$router.replace({
                    query: {
                        user_id: val.id,
                    },
                });
                //在付尾款阶段切换用户直接清空商品信息
                if (this.payForm.id && val.id != this.orderInfo.user.id) {
                    this.radio = 1;
                    this.payForm.balance_amount = '';
                    delete this.payForm.id;
                    this.tabData = [];
                }
                // if(!query.vip_no&&val){
                //     query.vip_no = val.vip_no;
                //     // this.$router.push({ path: this.$route.path, query})
                // }
            },
            //查询会员
            async select_vip_input(type) {
                //请求接口  看是多个会员还是 一个会员 多个的显示弹框
                if (this.isBtn) return;
                let keys = this.keys.trim();
                if (!keys) return this.$message.error('请输入姓名、手机号或会员卡号');
                this.isBtn = true;
                let { code, data } = await this.$Http.getUserSearch({ keys });
                this.isBtn = false;
                if (type == 1) this.isPayTheBalance = true;
                if (code) {
                    if (data.length == 0) return this.$message.error('未查询到会员信息');
                    let isBack = localStorage.getItem('isBack');
                    // console.log(isBack === false);
                    if (isBack === 'false') {
                        this.dialogVisible3 = true;
                    } else {
                        localStorage.setItem('isBack', false);
                    }
                    this.vipUserList = data;
                }
            },
            //根据id查询会员
            async queryUserInformation(id) {
                //请求接口  看是多个会员还是 一个会员 多个的显示弹框
                // this.dialogVisible3 = true
                this.isBtn = true;
                let { code, data } = await this.$Http.getUser({ id });
                this.isBtn = false;
                if (code) {
                    if (!data) return this.$message.error('未查询到该会员消息');
                    data.vip_name = data?.vip?.title;
                    this.userInfo = data || {};
                }
            },
            // 点击会员头像查看详情
            lookUser() {
                if (this.userInfo.id) {
                    this.utils.goUrl(`/cashierMemberInfo?id=${this.userInfo.id}`);
                }
            },
            goUserSrc(url) {
                let keys = {
                    addMember: {
                        title: '开卡',
                        valKey: 'id',
                    },
                    setUserRecharge: {
                        title: '充值',
                        valKey: 'id',
                    },
                    appointments: {
                        title: '预约',
                        valKey: 'vip_no',
                    },
                };
                if (this.userInfo.id) {
                    this.utils.goUrl(`/${url}?${keys[url].valKey}=${this.userInfo[keys[url].valKey]}`);
                } else this.$message.error(`请先选择要${keys[url].title}的会员`);
            },
            handleSizeChange(val) {
                this.paging.limit = val;
                this.getProject();
            },
            handleCurrentChange(val) {
                this.paging.page = val;
                this.getProject();
            },
            handleCurrentChange2(val) {
                this.balancePaging.page = val;
                this.getOrdersBalance();
            },
            dialogBeforeClose() {
                for (let i in this.userList) {
                    this.userList[i].isSelect = false;
                }
                this.dialogVisible2 = false;
            },
            handle_click(e, type, index, i) {
                //添加人员信息
                if (type == 1) {
                    this.dialogVisible2 = true;
                    this.childIndex = index;
                } else if (type == 2) {
                    //删除消费列表
                    this.tabData.splice(index, 1);
                } else if (type == 3) {
                    //删除列表下面的人员
                    this.tabData[index].commission.splice(i, 1);
                }
                this.$forceUpdate();
            },
            handleChange(e, item) {
                // console.log(e);
                // console.log(item);
            },
            handleClick(e) {
                // console.log('eeee', e);
                this.isSelect = 1;
                // this.tabIndex = e.index;
                //因为之前用的是index  现在改成name 为了匹配以前代码 需要name-1
                this.tabIndex = Number(e.name) - 1;
                this.tabData = [];
                this.reset();
            },
            reset() {
                //重置
                this.paging = this.$options.data().paging;
                this.handleCurrentChange(1);
            },
        },
    };
</script>

<style lang="scss" scoped>
    ::v-deep {
        .el-input-group__append {
            cursor: pointer;
        }

        .el-input-group__append {
            padding: 0;
        }

        // .el-dialog__body {
        //     padding-left: 0;
        //     padding-right: 0;
        // }

        // #dayin {
        //     padding: 30px;
        // }
    }

    .vs-search-box {
        padding-bottom: 10px;
    }

    .inquire {
        cursor: pointer;
        line-height: 37px;
        width: 80px;
        text-align: center;
    }

    .optionsWrap {
        margin-bottom: 10px;

        span {
            color: #606266;
        }

        ::v-deep {
            .el-input {
                width: 70px;
                margin: 0 5px;
            }
        }
    }

    .pay-others {
        ::v-deep .el-dialog__title {
            color: #f00;
        }
    }

    .image-thumbnail {
        width: 130px;
        height: 130px;
    }

    .userInfo {
        display: flex;
        flex-direction: column;
        .info {
            display: flex;

            .left_user_info {
                display: flex;
                flex-direction: column;
                align-items: center;

                > div {
                    width: 150px;
                    height: 150px;
                    background-color: rgba($color: #000000, $alpha: 0.1);
                }

                > span {
                    margin-top: 10px;
                    font-size: 14px;
                }
            }

            .right_user_info {
                .userForm {
                    display: flex;
                    flex-wrap: wrap;
                }
            }
        }

        .info2 {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 150px;
        }

        .btnList {
            margin-top: 30px;
            display: flex;
            align-items: center;
        }
    }

    .centerInfo {
        width: 100%;

        display: flex;
        justify-content: space-between;

        .left_center_info {
            padding: 20px;
            height: 790px;
            overflow: scroll;
            flex: 4;
            border: 1px solid rgba($color: #000000, $alpha: 0.1);

            .e_tab_pane {
                padding-top: 20px;

                > div {
                    .tab {
                        margin-top: 20px;
                    }
                }

                .selectList {
                    display: flex;
                    padding-bottom: 20px;

                    > div {
                        padding: 10px 15px;
                        border: 1px solid rgba($color: #000000, $alpha: 0.1);
                        cursor: pointer;
                    }

                    > span:first-child {
                        border-right: 0px;
                    }

                    .selectCss {
                        color: #409eff;
                    }
                }
            }
        }

        .right_center_info {
            margin-left: 20px;
            padding: 20px;
            padding-bottom: 0;
            height: 790px;
            overflow-y: auto;
            flex: 5;
            border: 1px solid rgba($color: #000000, $alpha: 0.1);

            .tab {
                margin-top: 30px;
            }
        }
    }

    .settlement {
        margin: 20px auto;
        padding: 20px 40px;
        width: 80%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid rgba($color: #000000, $alpha: 0.1);

        > div {
            display: flex;
            align-items: center;
        }
    }

    .user_info_css {
        display: flex;
        align-items: center;
        padding: 5px 0;
        justify-content: space-between;

        .user_n {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .user_name {
            width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .user_select {
            margin-left: 10px;
        }

        .radio_css {
            margin-left: 20px;
            width: 80px;
        }

        .money_css {
            margin-left: 20px;
        }
    }

    .icon-btn {
        cursor: pointer;
        font-size: 24px;
    }

    .icon-btn:last-child {
        margin-left: 10px;
    }

    .right_center_info::-webkit-scrollbar {
        width: 0px;
        height: 0px;
    }

    .left_center_info::-webkit-scrollbar {
        width: 0px;
        height: 0px;
    }

    .dlog_body {
        padding: 20px 40px;
        display: flex;
        border-top: 1px solid rgba($color: #000000, $alpha: 0.1);

        .tit {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        .body_one {
            margin-bottom: 20px;

            .title {
                font-size: 16px;
                margin-bottom: 15px;
            }

            .detailsWrap {
                .list {
                    display: flex;
                    align-items: center;

                    p {
                        width: 120px;
                    }

                    .price {
                        margin-left: 15px;
                        color: #f00;
                    }
                }
            }

            .paymentList {
                display: flex;

                .active-list {
                    .iconfont,
                    p {
                        color: #409eff;
                        transition: all 0.4s;
                    }
                }

                .list {
                    width: 70px;
                    text-align: center;
                    margin-right: 20px;
                    cursor: pointer;
                }

                .list:hover p {
                    color: #409eff;
                    transition: all 0.4s;
                }

                .list:hover .icon-zhanghuyue,
                .list:hover .icon-xianjin,
                .list:hover .icon-yinhangqia,
                .list:hover .icon-icon-zengsong {
                    color: #409eff;
                }

                .list:last-child {
                    width: 90px;
                    margin-right: 0;
                }

                i {
                    font-size: 26px;
                    transition: all 0.4s;
                }

                .icon-weixin {
                    color: #1afa29;
                }

                .icon-zhifubaozhifu {
                    color: #0b7eff;
                }
            }
        }
    }

    .receipt_body {
        .title {
            font-size: 14px;
            text-align: center;
        }

        .shopInfo {
            padding: 5px 0;
            border-top: 1px dashed #dcdfe6;
            border-bottom: 1px dashed #dcdfe6;
        }

        .titleList {
            display: flex;
            justify-content: space-between;
            text-align: left;

            p {
                width: 70px;
                text-align: center;
                margin-left: 10px;

                &:first-child {
                    margin-left: 0;
                }

                margin: 0;
                margin-bottom: 10px;
            }
        }

        .titleList:last-child {
            p {
                margin-bottom: 0;
            }
        }

        .receiptsPrice {
            text-align: right;
            font-size: 18px;
            margin-bottom: 30px;
        }

        .totalPrice {
            text-align: right;
            font-size: 16px;
            margin: 15px 0;
        }

        .common {
            margin-bottom: 10px;
        }
    }

    .finished-product {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;

        .selectList {
            width: max-content;
        }
    }

    @page {
        size: auto;
        margin: 5mm;
        mso-header: none;
        mso-footer: none;
    }
</style>
